<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index案例</title>
    <style>     
        ul {
            padding: 0;
        }
        li {
            list-style: none;
            float: left;
            margin-left: 20px;            position: relative; /* 为子菜单定位做准备 */
        }

        a {
            text-decoration: none;
            color: black;
            display: block; /* 使<a>元素可以包含子菜单 */
            padding: 5px; /* 为链接添加一些内边距 */
        }

        /* 下拉菜单的样式 */
        .dropdown {
            display: none; /* 默认隐藏下拉菜单 */
            position: absolute; /* 绝对定位 */
            top: 100%; /* 紧挨着父菜单项 */
            left: 0;
            background-color: #fff;
            border: 1px solid #ddd;
            z-index: 1000;
        }

        /* 鼠标悬停时显示下拉菜单 */
        li:hover .dropdown {
            display: block;
        }

        .dropdown li {
            float: none; /* 子菜单项不浮动 */
            margin-left: 0; /* 重置外边距 */
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">咖啡</a>
            <ul class="dropdown">
                <li><a href="#">美式咖啡</a></li>
                <li><a href="#">拿铁咖啡</a></li>
                <li><a href="#">摩卡咖啡</a></li>
            </ul>
        </li>
        <li><a href="#">果茶</a>
        <ul class="dropdown">
            <li><a href="#">美式果茶</a></li>
            <li><a href="#">拿铁果茶</a></li>
            <li><a href="#">摩卡果茶</a></li>

        </ul>
        </li>
        <li><a href="#">奶茶</a>
            <ul class="dropdown">
                <li><a href="#">美式奶茶</a></li>
                <li><a href="#">拿铁奶茶</a></li>
                <li><a href="#">摩卡奶茶</a></li>
            </ul>
        </li>   
    </ul>
</body>
</html>